<!DOCTYPE html>
<html lang="zh-CN">
<head>
    
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>网易音乐搜索下载器API版</title>
	<meta name="keywords" content="网易音乐搜索下载器API版，音乐试听，免费音乐在线播放" />
	<meta name="description" content="网易音乐搜索下载器API版，音乐试听，免费音乐在线播放，BY:小小枫公益API，微悦网音乐，新奇秀" />
	<meta name="referrer" content="always"> 
<meta name="referrer" content="no-referrer" />
    <style>
        /* 基础变量定义（统一样式管理） */
        :root {
            --primary-color: #ff5500;
            --primary-gradient: linear-gradient(45deg, #ff6b6b, #ff5500);
            --secondary-gradient: linear-gradient(45deg, #4dabf7, #339af0);
            --bg-color: #f5f5f5;
            --card-bg: rgba(255,255,255,0.95);
            --border-color: #dee2e6;
            --text-dark: #333;
            --text-light: #666;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
            --shadow-md: 0 4px 15px rgba(0,0,0,0.1);
            --border-radius-sm: 8px;
            --border-radius-md: 12px;
            --border-radius-lg: 25px;
            --spacing-xs: 5px;
            --spacing-sm: 10px;
            --spacing-md: 15px;
            --spacing-lg: 20px;
        }

        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            color: var(--text-dark);
        }

        body {
            font-family: Arial, -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-color);
            padding: var(--spacing-md);
            padding-bottom: 320px; /* 为底部播放器预留固定空间 */
            min-height: 100vh;
        }

        /* 整体容器（自适应宽度） */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
        }

        /* 搜索区域（自适应布局） */
        .search-box {
            display: flex;
            gap: var(--spacing-sm);
            width: 100%;
            flex-wrap: wrap;
        }

        .search-box input {
            flex: 1;
            min-width: 200px; /* 移动端最小宽度限制 */
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius-lg);
            padding: 12px 20px;
            font-size: 16px;
            transition: all 0.3s ease;
            outline: none;
        }

        .search-box input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 8px rgba(255,85,0,0.2);
        }

        .search-box button {
            background: var(--primary-gradient);
            color: white;
            border: none;
            border-radius: var(--border-radius-lg);
            padding: 12px 25px;
            cursor: pointer;
            transition: transform 0.2s ease;
            white-space: nowrap;
        }

        .search-box button:hover {
            transform: translateY(-2px);
        }

        /* 音乐列表区域 */
        .song-list {
            background: var(--card-bg);
            border-radius: var(--border-radius-md);
            padding: var(--spacing-md);
            box-shadow: var(--shadow-sm);
            width: 100%;
        }

        .song-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            gap: var(--spacing-sm);
            transition: all 0.3s ease;
        }

        .song-item:hover {
            transform: translateX(5px);
            background: rgba(255,85,0,0.05);
            border-radius: var(--border-radius-sm);
        }

        .song-item span[style*="color:red"] {
            color: var(--primary-color);
            margin-right: var(--spacing-xs);
        }

        .song-item img {
            border-radius: var(--border-radius-sm);
            width: 40px;
            height: 40px;
            object-fit: cover;
        }

        /* 底部固定播放器（核心调整：固定在底部，自适应宽度） */
        .bottom-player {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--card-bg);
            padding: var(--spacing-md);
            box-shadow: 0 -2px 15px rgba(0,0,0,0.1);
            z-index: 999;
            display: grid;
            grid-template-columns: 1fr 1fr; /* 左右分栏：播放器+历史记录 */
            gap: var(--spacing-md);
            border-top-left-radius: var(--border-radius-md);
            border-top-right-radius: var(--border-radius-md);
        }

        /* 播放器核心区域 */
        .player-core {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            flex-wrap: wrap;
            justify-content: center;
        }

        #currentCover {
            width: 100px;
            height: 100px;
            border-radius: var(--border-radius-sm);
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            object-fit: cover;
        }

        .player-info {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
            min-width: 200px;
        }

        #currentSong {
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 进度条样式 */
        .progress-bar {
            height: 6px;
            background: #e9ecef;
            border-radius: 3px;
            margin: var(--spacing-xs) 0;
            position: relative;
            cursor: pointer;
            width: 100%;
        }

        .progress-filled {
            height: 100%;
            background: var(--primary-gradient);
            border-radius: 3px;
            width: 0%;
        }

        .progress-handle {
            width: 16px;
            height: 16px;
            background: var(--primary-color);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }

        /* 时间显示 */
        .time-display {
            font-family: monospace;
            color: var(--text-light);
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }

        /* 播放器按钮组 */
        .player-btns {
            display: flex;
            gap: var(--spacing-sm);
            margin-top: var(--spacing-xs);
        }

        .player-btns button {
            background: var(--secondary-gradient);
            color: white;
            border: none;
            border-radius: var(--border-radius-sm);
            padding: 8px 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .player-btns button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(77,171,247,0.3);
        }

        /* 播放历史区域 */
        .play-history {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
            max-height: 180px; /* 限制高度，避免遮挡过多内容 */
        }

        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .history-header h3 {
            font-size: 16px;
            color: var(--text-dark);
        }

        .history-header button {
            background: #ff4444;
            color: white;
            border: none;
            border-radius: var(--border-radius-sm);
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
        }

        #historyList {
            overflow-y: auto;
            flex: 1;
        }

        .history-item {
            display: flex;
            align-items: center;
            padding: 6px;
            gap: var(--spacing-xs);
            cursor: pointer;
            font-size: 14px;
            border-bottom: 1px solid #f0f0f0;
        }

        .history-item:hover {
            background: rgba(255,85,0,0.05);
            border-radius: var(--border-radius-sm);
        }

        .history-item img {
            width: 30px;
            height: 30px;
            border-radius: var(--border-radius-sm);
            object-fit: cover;
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background: rgba(200,200,200,0.1);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 3px;
        }

        /* 音频元素隐藏（仅用自定义控件） */
        #audioPlayer {
            display: none;
        }

        /* 移动端适配（平板及以下） */
        @media (max-width: 1080px) {
            .bottom-player {
                grid-template-columns: 1fr; /* 移动端改为垂直排列 */
                padding: var(--spacing-sm);
            }

            .play-history {
                max-height: 120px;
            }

            body {
                padding-bottom: 420px; /* 调整底部预留空间 */
            }
        }

        /* 手机竖屏适配 */
        @media (max-width: 768px) {
            .player-core {
                flex-direction: column;
                text-align: center;
            }

            .player-info {
                width: 100%;
                min-width: unset;
            }

            .player-btns {
                justify-content: center;
                width: 100%;
            }

            body {
                padding: var(--spacing-sm);
                padding-bottom: 480px;
            }

            .search-box input {
                min-width: unset;
                width: 100%;
                margin-bottom: var(--spacing-sm);
            }

            .search-box button {
                width: 100%;
            }
        }

        /* 手机横屏适配 */
        @media (max-width: 768px) and (orientation: landscape) {
            body {
                padding-bottom: 220px;
            }

            .bottom-player {
                grid-template-columns: 2fr 1fr; /* 横屏恢复左右分栏 */
            }

            #currentCover {
                width: 80px;
                height: 80px;
            }

            .play-history {
                max-height: 100px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 搜索框 -->
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="请输入歌曲名称">
            <button onclick="searchMusic()">搜索</button>
        </div>

        <!-- 歌曲列表 -->
        <div class="song-list" id="searchResults">
            <div style="text-align:center;padding:30px;color:var(--text-light)">请输入歌曲名称并点击搜索</div>
        </div>
    </div>
 <div class="module-blocklist module-player-list" style="padding: 35px;border-radius: 10px;margin-bottom: 20px;"> <h3 style="text-align: center;"><p class="sitemap"><img src="http://www.julaile.cn/logo.png" height="10">
		 		<a target="_blank" href="http://www.julaile.cn/">友情链接：</a><span class="space-line-bold"></span>
				<a target="_blank" href="http://www.julaile.cn/index.php/label/vip.html">VIP解析</a><span class="space-line-bold"></span>
		<a target="_blank" href="http://www.julaile.cn/index.php/label/music.html">音乐搜索</a><span class="space-line-bold"></span>
		 		<a target="_blank" href="https://api.xfabe.com/info/wy_MuiscInfo/doc">小枫公益API</a><span class="space-line-bold"></span>
				<a target="_blank" href="http://www.julaile.cn/index.php/label/top.html">短剧排行榜</a>
	</p></div>
    <!-- 底部固定播放器（核心调整区域） -->
    <div class="bottom-player">
        <!-- 播放器核心（封面+信息+按钮） -->
        <div class="player-core">
            <a target="_blank" href="http://www.julaile.cn">
                <img id="currentCover" src="http://www.julaile.cn/logo.png" alt="专辑封面">
            </a>
            <div class="player-info">
                <h3 id="currentSong">剧来了-Www.julaile.Cn</h3>
                <div class="progress-bar" onclick="seek(event)">
                    <div class="progress-filled" id="progressFilled"></div>
                    <div class="progress-handle" id="progressHandle"></div>
                </div>
                <div class="time-display">
                    <span id="currentTime">0:00</span>
                    <span id="duration">0:00</span>
                </div>
                <div class="player-btns">
                    <button class="play-btn" onclick="togglePlay()">▶ 播放</button>
                    <button class="download-btn" onclick="downloadMusic()">↓ 下载</button>
                </div>
            </div>
        </div>

        <!-- 播放历史 -->
        <div class="play-history">
            <div class="history-header">
                <h3>播放历史</h3>
                <button onclick="deleteHistory()">× 清除</button>
            </div>
            <div id="historyList"></div>
        </div>
    </div>

    <!-- 音频元素 -->
    <audio id="audioPlayer" ontimeupdate="updateProgress()" onended="handleAudioEnd()"></audio>

     <script>
        // 播放器状态
        let playerState = {
            currentIndex: -1,
            playMode: 'sequence', // sequence | loop | random
            // 删除playlist数组
            // playlist: [],
            history: JSON.parse(localStorage.getItem('playHistory')) || []
        };

        // 搜索音乐
        async function searchMusic() {
            const keyword = document.getElementById('searchInput').value;
            const response = await fetch(`https://node.api.xfabe.com/api/wangyi/search?search=${encodeURIComponent(keyword)}&limit=100`);
            const { data } = await response.json();
            
            const resultsDiv = document.getElementById('searchResults');
            resultsDiv.innerHTML = data.songs.map(song => `
                <div class="song-item" onclick="playSong(${song.id})">
                    ${song.pay === '付费音乐' ? '<span style="color:red">[VIP]</span>' : ''}
                    ${song.name} - ${song.artistsname}
                </div>
            `).join('');
        }

        // 播放歌曲
        async function playSong(id) {
            const response = await fetch(`https://node.api.xfabe.com/api/wangyi/music?type=json&id=${id}`);
            const { data } = await response.json();
            
            // 更新播放器
            document.getElementById('currentCover').src = data.picurl;
            document.getElementById('currentSong').textContent = `${data.name} - ${data.artistsname}`;
            const audio = document.getElementById('audioPlayer');
            audio.src = data.url;
            audio.play();
            
            // 添加到播放历史和本地存储
            playerState.history = [data, ...playerState.history.filter(item => item.id !== data.id)];
            localStorage.setItem('playHistory', JSON.stringify(playerState.history));
            updateHistoryDisplay();
        }

        // 更新历史记录显示
        function updateHistoryDisplay() {
            document.getElementById('historyList').innerHTML = playerState.history.map(song => `
                <div class="song-item" onclick="playSong(${song.id})">
                    <img src="${song.picurl}" width="40" height="40" style="border-radius:4px">
                    ${song.name} - ${song.artistsname}
                </div>
            `).join('');
        }

        // 播放控制
        function togglePlay() {
            const audio = document.getElementById('audioPlayer');
            audio.paused ? audio.play() : audio.pause();
        }

       

        // 下载音乐
        function downloadMusic() {
            const audio = document.getElementById('audioPlayer');
            if(!audio.src) return;
            
            const link = document.createElement('a');
            link.href = audio.src;
            link.download = `${document.getElementById('currentSong').textContent}.mp3`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // 初始化加载历史记录
        updateHistoryDisplay();
    </script>

    <script>
        // 在playerState中添加
        let isDragging = false;

        // 新增进度条功能
        function updateProgress() {
            const audio = document.getElementById('audioPlayer');
            const progress = (audio.currentTime / audio.duration) * 100 || 0;
            document.getElementById('progressFilled').style.width = `${progress}%`;
            document.getElementById('progressHandle').style.left = `${progress}%`;
            document.getElementById('currentTime').textContent = formatTime(audio.currentTime);
            document.getElementById('duration').textContent = formatTime(audio.duration);
        }

        function formatTime(seconds) {
            const min = Math.floor(seconds / 60);
            const sec = Math.floor(seconds % 60);
            return `${min}:${sec.toString().padStart(2, '0')}`;
        }

        function seek(e) {
            if(isDragging) return;
            const audio = document.getElementById('audioPlayer');
            const rect = e.target.getBoundingClientRect();
            const percent = (e.clientX - rect.left) / rect.width;
            audio.currentTime = percent * audio.duration;
        }

        // 添加拖拽事件处理
        document.getElementById('progressHandle').addEventListener('mousedown', () => {
            isDragging = true;
            document.addEventListener('mousemove', onDrag);
            document.addEventListener('mouseup', () => {
                isDragging = false;
                document.removeEventListener('mousemove', onDrag);
            });
        });

        function onDrag(e) {
            const audio = document.getElementById('audioPlayer');
            const progressBar = document.querySelector('.progress-bar');
            const rect = progressBar.getBoundingClientRect();
            let percent = (e.clientX - rect.left) / rect.width;
            percent = Math.max(0, Math.min(1, percent));
            audio.currentTime = percent * audio.duration;
        }

        // 修改playSong函数，添加以下代码
        audio.addEventListener('loadedmetadata', () => {
            document.getElementById('duration').textContent = formatTime(audio.duration);
        });
    </script>
</body>

    <script>
        // 新增删除历史功能
        function deleteHistory() {
            playerState.history = [];
            localStorage.removeItem('playHistory');
            updateHistoryDisplay();
        }
    </script>

   
</html>